Figma To Code Report June 2024
👀 Overview
The biggest issue with Figma-to-code tools today is code quality. As a Figma-to-code plugin ourselves, we needed a way to measure the quality of the code generated, as well as see how we were faring against our competitors.
🧠 Using AI to compare code quality
This report compares the top 5 most popular Figma to Code tools in the market to give a comparison between each of them to help you decide which is the best for you. For an unbiased result, the evaluation of said tools was done using 3rd party AI tools, namely GPT, Claude and Gemini.
Scroll To:
🔎 Testing Methodology
We prompted GPT, Claude, and Gemini to compare the code generated from these tools based on key frontend development metrics.
Frameworks Chosen
We picked React + Tailwind for the code output format. As of 2024, React is still the most used JavaScript framework of choice according to latest framework usage data from OSS Insight We also chose Tailwind for CSS styling, as it is alos the most popular CSS framework according to reports from State of CSS 2023.
AI Prompt
You are a coding assistant who reviews code quality.
You must return a JSON output that follows the following schema:
// Schema was too long, go to the github above for the full schema
You must return the response in JSON format.
Open Source Code Quality Evaluation
To make the process faster, we also made an npm package called codeqc to automate part of the process. You can find the npm package here and the GitHub repo here. Feel free to try it out yourself!
🧪 Test Cases
To provide a good gauge of the average Figma design, we needed to test the products against fairly popular Figma designs. After thorough research, we went with Untitled UI one of the most popular Figma templates we could find in the Figma community library
🔗❖ Untitled UI - FREE Figma UI kit and design system v2.0
This template had 151,000 downloads, and 6,300 likes, making it a good test case for our analysis.
From this Figma template, we picked 2 common use cases (i.e. Login page and Pricing page).
📝 Frontend Code Metrics we used
| Metric | Description |
|---|---|
| Format and Readability | Assesses clarity and neatness of the code, including consistency of indentation, use of whitespace, meaningful comments, and proper naming conventions. |
| Component Structure | Evaluates the organization of the codebase into components or modules, focusing on logical grouping, separation of concerns, and ease of extension or modification. |
| Responsiveness and Styling | Reviews how effectively the application adapts to different screens and orientations, ensuring consistent and harmonious styles and themes. |
| Accessibility | Focuses on the application's accessibility, adherence to standards like WCAG and ARIA, and usability with assistive technologies. |
| Code Reusability | Examines modularity and reusability of code across the application or different projects, encouraging DRY principles. |
| Performance | Assesses code efficiency, including load times, responsiveness, resource management, and identification of bottlenecks or overhead. |
| Best Practices | Reviews adherence to industry-standard coding practices, use of secure libraries, error handling, logging, and security from common vulnerabilities. |
🖱️ Interactive Comparison
To get an unbiased personal opinion of output code quality and output pixel perfection, use the interactive comparison to compare different outputs for yourself.
| Original Design | Generated Render |
|---|---|
 |  |
Generated Code (Sample) | |
🤖 Code Evaluation Report with LLMs
A separate table for each LLM was created. You can see a sample here For easier reading, we put in all the tables into GPT-4o to summarize all 6 tables into 2 tables by combining, averaging, and summarizing the table contents.
1️⃣ Test Case 1 Code Report
We used a simple UI from UntitledUI as a control group.
| FireJet | Locofy | Builder | Codia | Figma-to-code | |
|---|---|---|---|---|---|
| Score | 84.3 | 82.6 | 85 | 78.3 | 63.3 |
| Format and Readability | Well-formatted, readable, consistent | Consistent, needs more comments | Well-formatted, needs more comments | Well-formatted, readable, consistent | Poorly formatted, inconsistent, lacks comments |
| Component Structure | Well-organized, modular, clear purpose | Component-based, modular, reusable | Modular, separates concerns, reusable | Component-based, could extract more | Lacks clear structure, excessive nesting |
| Responsiveness and Styling | Responsive, adapts well, appealing | Responsive units, consistent styling | Responsive, Tailwind CSS, some fixed widths | Tailwind CSS, needs more testing | Uses fixed widths, lacks responsiveness |
| Accessibility | Lacks explicit accessibility | Lacks accessibility attributes | Includes basic accessibility | Lacks explicit features | Doesn't follow standards |
| Code Reusability | Good reusability, DRY principles | Good reusability, modular components | Reusable components, potential for more | Some reusability, room for improvement | Low reusability, repeated elements |
| Performance | Lacks explicit optimization | Efficient rendering, potential optimization | No major issues, potential optimization | No major issues, consider strategies | Excessive nesting may affect performance |
| Best Practices | Follows modern practices, could improve | Follows some practices, areas to improve | Follows modern practices, could improve | Follows modern practices, needs error handling | Doesn't adhere to practices, lacks security |
2️⃣ Test Case 2 Code Report
This UI was is more complex than the previous test case, providing a better representation of Figma-to-code conversion
| FireJet | Locofy | Builder | Codia | Figma-to-code | |
|---|---|---|---|---|---|
| Score | 86.7 | 86.7 | 81.7 | 76.7 | 63.3 |
| Format and Readability | Well-formatted, readable, minimal comments | Well-formatted, readable, sparse comments | Consistent, readable, needs more comments | Readable, naming could be improved | Complex, verbose, lacks comments |
| Component Structure | Well-organized, clear purpose | Modular, reusable, clear responsibility | Well-structured, could be further broken down | Structured, but needs improvement | Lacks clear structure, repeated blocks |
| Responsiveness and Styling | Responsive, consistent, Tailwind CSS | Responsive, Tailwind CSS, media queries | Responsive Tailwind classes | Tailwind CSS, fixed widths concerning | Fixed widths, extensive utility classes |
| Accessibility | Basic features, needs improvement | Needs improvement, lacks ARIA attributes | Includes some features, needs improvement | Minimal consideration | No indication of accessibility |
| Code Reusability | Good reusability, components, Tailwind | Good practices, modular components | Demonstrates reusability, could be improved | Low reusability, repeated styles | Very low reusability, repeated patterns |
| Performance | Vite for optimization, needs testing | Lazy loading, web vitals, needs optimization | Lazy loading, CSS classes, needs optimization | No obvious bottlenecks, needs optimization | Inline styles, non-semantic HTML impact performance |
| Best Practices | TypeScript, secure libraries, needs logging | Modern JS, modular, needs security | TypeScript, CSS framework, needs error handling | TypeScript, React, Tailwind CSS | Doesn't follow best practices, needs refactoring |
💰 Pricing Comparison
This segment isn't really part of the analysis, but I went ahead to the pricing pages of the Figma-to-code tools and summarized their pricing models so you don't have to.
| FireJet | Locofy | Builder | Codia | Figma To Code | |
|---|---|---|---|---|---|
| Frameworks | React, Vue, Svelte, HTML, TypeScript, JavaScript | React, HTML, Next.js, Gatsby, Vue | React, Qwik, Vue, Svelte, Angular, HTML, Solid, Marko, Mitosis | React, Vue, HTML | React, HTML |
| Styling | Tailwind, CSS | CSS Modules, CSS, Tailwind, Styled components, Emotion, Inline | Tailwind, CSS, Emotion, Styled components, Styled JSX | CSS, Tailwind, Inline | Tailwind, Inline |
| Tier 1 | 2 week free trial | Free beta, potential paid plans in the future | Free: Basic features with limited usage | Free: Basic features, limited usage | Free |
| Tier 2 | Pro: 38 USD monthly, 198 USD annually, full access | - | Basic: $24 monthly, $338 annually, includes enhanced features and higher usage limits | Starter: $29 monthly, $204 annually, includes more features and higher usage limits | - |
| Tier 3 | Lifetime 248 USD one-time payment, use forever, full access | - | Growth: $49 monthly, $468 annually, advanced features, increased usage limits, and premium support | Pro: $49 per month, $348 annually, advanced features, unlimited usage, and priority support | - |
TLDR - So which one should I use?
In conclusion, our comprehensive analysis using third-party AI tools GPT, Claude, and Gemini, evaluated the code quality of five leading Figma-to-code tools.
| FireJet | Locofy | Builder | Codia | Figma-to-code | |
|---|---|---|---|---|---|
| Pricing Model | 2 week trial $38/mth 198/yr | Free beta Future paid plans | $24/mth $338/yr | $29/mth $204/yr | Free |
| Login Page Test | 84.3 | 82.6 | 85 | 78.3 | 63.3 |
| Pricing Page Test | 86.7 | 86.7 | 81.7 | 76.7 | 63.3 |
The tools were assessed based on format and readability, component structure, responsiveness and styling, accessibility, code reusability, performance, and best practices.
FireJet emerged as one of the top contenders with strong scores across most categories, particularly in code readability and component structure.
Stay tuned for more code comparisons in the future.